import { Card, Progress, Descriptions } from 'antd'
import { React, useEffect, useState, memo } from 'react'
import { Chart } from '@antv/g2'
import { ipList as presentIp } from '../../ipConfig'

function SelectedOccupancy({ selectedTags }) {
  const [data, setData] = useState({
    totalLivedRoomNumber: 0,
    totalRoomNumber: 0,

    hotelnumChange: [],
  })

  useEffect(() => {
    const hotellistId = []
    selectedTags.map((item) => {
      hotellistId.push(item.hotelId)
      return item
    })
    if (hotellistId.length > 0) {
      let url = `${presentIp.DEV_IP}/option_occupancyAll?hotellist=${hotellistId}`
      fetch(url, {
        headers: {
          token: sessionStorage.getItem('token'),
        },
      })
        .then((response) => {
          return response.json()
        })
        .then((json) => {
          setData(json.data)
        })
    }
  }, [selectedTags])

  useEffect(() => {
    if (data) {
      document.getElementById('selectedOccupancy').innerHTML = ''
      draw(data.hotelnumChange)
    }
  }, [data])
  const draw = (drawData) => {
    const chart = new Chart({
      container: 'selectedOccupancy',
      autoFit: true,
      height: 440,
      padding: [5, 10, 5, 10],
    })
    chart.axis(false)
    chart.data(drawData)
    chart.tooltip({
      showCrosshairs: true,
      position: 'bottom',
    })
    chart.scale('livedRate', {
      nice: true,
      range: [0.1, 0.9],
      alias: '入住率',
      formatter: (value) => {
        return (value * 100).toFixed(2) + '%'
      },
    })
    chart.scale('week', {
      range: [0.1, 0.9],
    })

    chart.interaction('active-region')

    chart.line().position('week*livedRate')

    chart.render()
  }

  return (
    <>
      <Card
        title="入住率"
        bordered={false}
        size="small"
        style={{
          width: '100%',
          height: '100%',
          padding: 0,
        }}
        headStyle={{
          height: '20%',
        }}
        bodyStyle={{
          height: '80%',
        }}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          }}>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              height: '50%',
            }}>
            <div
              style={{
                width: '50%',
              }}>
              <Descriptions column={1}>
                <Descriptions.Item label="入住率">
                  {(
                    (data.totalLivedRoomNumber / data.totalRoomNumber) *
                    100
                  ).toFixed(2) + '%'}
                </Descriptions.Item>
                <Descriptions.Item label="入住数">
                  {data.totalLivedRoomNumber}/ {data.totalRoomNumber}
                </Descriptions.Item>
              </Descriptions>
            </div>
            <div
              style={{
                width: '50%',
              }}>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Progress
                  type="circle"
                  percent={(
                    (data.totalLivedRoomNumber / data.totalRoomNumber) *
                    100
                  ).toFixed(2)}
                  width={80}
                />
              </div>
            </div>
          </div>

          <div
            id="selectedOccupancy"
            style={{
              height: '50%',
            }}></div>
        </div>
      </Card>
    </>
  )
}

export default memo(SelectedOccupancy)
